<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style>
#div1 .active{
	background:#FF0}
#div1 div{
	width:200px;
	height:100px;
	border:1px #000000 solid;
	display:none;}
</style>
<script>
window.onload=function()
{  
	var oDiv=document.getElementById('div1')//取一个元素
	var oBtn=oDiv.getElementsByTagName('input')
	var aDiv=oDiv.getElementsByTagName('div')//取一组元素
	<!--取出需要的元素，用一个函数命名。
	for(var i=0;i<oBtn.length;i++)
	{
		oBtn[i].onclick=function()
		{
			//this当前发生事件的元素
			//alert(this.value);
			for (var i=0;i<oBtn.length;i++)
			{
				oBtn[i].index=i
				oBtn[i].className='';         //所有的先隐藏      
				aDiv[i].style.display='none'; //所有的先隐藏
			}
			this.className='active';          //当前活动的显示
			aDiv[this.index].style.display='block';//当前活动的显示
		};
	};
};
  
</script>
</head>

<body>
<div id="div1">
<input class="active" type="button" value="教育" />
<input type="button" value="培训" />
<input type="button" value="招生" />
<input type="button" value="出国" />
<br />
<div style="display:block">好好学习，天天向上</div>
<div>多多互相虚心学习</div>
<div>招生电话:1536458126</div>
<div>出国深造，为国效力</div>
</div>
</body>
</html>
